<template>
  <div id="Home">
    <!-- 登录 -->
    <div class="login">
      <a>login</a>
      <a>logout</a>
    </div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        sort by
        <span>
          price:
          <i class="el-icon-d-caret" v-if="sort==0" @click="changeSort" />
          <i class="el-icon-caret-top" v-if="sort==1" @click="changeSort" />
          <i class="el-icon-caret-bottom" v-if="sort==2" @click="changeSort" />
        </span>
      </el-header>
      <el-container>
        <!-- 左侧价格 -->
        <el-aside>
          <h3>PRICE:</h3>
          <ul>
            <li
              v-for="(item, i) in prices"
              :key="i"
              @click="pIndex = i"
              :class="{ act: pIndex == i }"
            >{{ item }}</li>
          </ul>
        </el-aside>
        <!-- 右侧商品信息 -->
        <el-main>
          <div class="box">
            <div class="item" v-for="(item,i) in goodsList" :key="i">
              <img :src="'/static/mock/img/'+item.productImage" />
              <p>{{item.productName}}</p>
              <p>${{item.salePrice}}</p>
              <el-button plain type="danger">加入购物车</el-button>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      sort: 0,
      goodslist: [],
      pIndex: 0,
      prices: [
        "All",
        "0.00-100.00",
        "100.00-500.00",
        "500.00-1000.00",
        "1000.00-2000.00",
      ],
    };
  },
  computed: {
    goodsList() {
      let data = this.goodslist;
      if (this.sort == 0) {
        return data;
      }
    },
  },
  methods: {
    //排序
    changeSort() {
      if (this.sort == 0 || this.sort == 2) {
        this.sort = 1;
      } else {
        this.sort = 2;
      }
    },
    getList() {
      this.$axios({
        url: "/static/mock/data.json",
      }).then((res) => {
        console.log(res);
        this.goodslist = res.result.list;
      });
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getList();
  },
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
#Home {
  width: 90%;
  background: #f0f0f0;
  margin: 0 auto;
  .login {
    width: 100%;
    line-height: 60px;
    margin-bottom: 10px;
    margin-top: 10px;
    background: white;
    text-align: right;
    a {
      color: black;
    }
  }
  .el-container {
    .el-header {
      background: white;
      line-height: 60px;
      text-align: right;
      padding: 0px 10px;
      box-sizing: border-box;
    }
    .el-aside {
      width: 20% !important;
      padding: 10px;
      box-sizing: border-box;
      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
        li {
          cursor: pointer;
          line-height: 40px;
          font-size: 16px;
          text-indent: 15px;
          margin-bottom: 10px;
        }
        li.act {
          border-left: #a00000 2px solid;
          color: #a00000;
          font-weight: bolder;
          text-indent: 15px;
        }
      }
    }
    .el-main {
      width: 80% !important;
      .box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .item {
          padding: 10px;
          box-sizing: border-box;
          width: 23%;
          margin: 1%;
          min-height: 80px;
          background: #fff;
          img {
            width: 100%;
          }
          .el-button {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
